#能力评价
#如果异步处理时间太短雷达图可能显示不出来
<route lang="yaml">
  meta:
    layout: layout_as
  </route>
<script setup lang="ts">

import { ref, onMounted } from "vue";
import * as echarts from 'echarts';
import {assessment} from "@/store/assessment";
import assessment_list from "@/store/assessment_list";

let loading = ref(false);
let want_job = ref('');
let expectedSalary = ref('');
let expectedLocation = ref('');
let showAssessmentResult = ref(true);
let showCompanyInfo = ref(true);
let assessmentResult = ref('');
let companyInfo = ref('');

interface CompanyInfo {
  title: string;
  shortDescription: string;
  description: string;
  // 可以添加更多信息字段，如图片等
}

let companyInfos = ref<CompanyInfo[]>([
  { title: '公司A信息', shortDescription: '简介...', description: '这是公司A的详细介绍...' },
  { title: '公司B信息', shortDescription: '简介...', description: '这是公司B的详细介绍...' },
  { title: '公司C信息', shortDescription: '简介...', description: '这是公司C的详细介绍...' },
]);

let dialogShown = ref(false);
let selectedCompanyInfo: CompanyInfo | null = ref(null); // 更改为使用 ref 包装

const openDialog = (info: CompanyInfo) => {
  selectedCompanyInfo.value = info; // 更改赋值方式为 .value
  dialogShown.value = true;
};


const startAssessment = () => {
  if (!want_job.value.trim()) {
    alert('请输入意向工作');
    return;
  }
  loading.value = true;
  console.log('开始测评');
  console.log(want_job.value)
  console.log(1);
  assessment(want_job.value)
  console.log(2);
  // 模拟异步请求能力评估和公司信息
  setTimeout(() => {
    console.log(3);
    assessmentResult.value = '这里是能力评估的结果';
    companyInfo.value = '这里填充公司信息';
    loading.value = false;
    showAssessmentResult.value = true;
    showCompanyInfo.value = true;
    drawRadarChart(); // 绘制雷达图
    console.log(4);
  }, 1000);
};

// 星星图标数组，包含星星和星星轮廓
const icons = [
  { type: 'mdi-star', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star-outline', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star-outline', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star-outline', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
  { type: 'mdi-star-outline', left: `${Math.random() * (window.innerWidth - 50)}px`, top: `${Math.random() * (window.innerHeight - 50)}px`, delay: `${Math.random() * 5}s` },
];

// 绘制雷达图
const drawRadarChart = () => {
  const echartsContainer = document.getElementById('echarts-container');
  const myChart = echarts.init(echartsContainer);
  // 模拟雷达图数据
  const radarData = {
    indicator: [
      { name: '学历', max: 10 },
      { name: '经验', max: 10 },
      { name: 'GPA', max: 10 },
      { name: '技能证书', max: 10 },
      { name: '荣誉奖项', max: 10 },
      { name: '自我评价', max: 10 }
    ],
    value: [3, 4, 8, 10, 6.5, 2.4]
  };
  const option = {
    radar: {
      shape: 'circle',
      indicator: radarData.indicator
    },
    series: [{
      type: 'radar',
      data: [
        {
          value: radarData.value,
          name: '能力评估'
        }
      ]
    }]
  };
  myChart.setOption(option);
};
</script>


<template>
  <div class="icons-container">
    <!-- 星星元素 -->
    <div v-for="(icon, index) in icons" :key="index" :class="'icon icon'+index" :style="{ left: icon.left, top: icon.top, animationDelay: icon.delay }">
      <v-icon>{{ icon.type }}</v-icon>
    </div>

    <!-- 其他界面元素 -->

    <div>
      <v-img
        aspect-ratio="16/9"
        cover
        src="@/assets/social/welcome.png"
      ></v-img>
    </div>
    <v-card
      class="mx-auto mt-n5"
      color="grey-lighten-3"
      max-width="600"
    >
      <v-card-text>
        <v-text-field
          v-model="want_job"
          :loading="loading"
          append-inner-icon="mdi-magnify"
          label="你的意向工作是"
          variant="outlined"
          type="text"
          clearable
          hide-details
          @click:append-inner="startAssessment"
          @keyup.enter="startAssessment"
        ></v-text-field>

        <v-row class="mt-4">
          <v-col cols="12" md="6">
            <v-text-field
              v-model="expectedSalary"
              label="你的预期薪资"
              variant="outlined"
              type="text"
              clearable
              hide-details
            ></v-text-field>
          </v-col>
          <v-col cols="12" md="6">
            <v-text-field
              v-model="expectedLocation"
              label="你的预期工作地点"
              variant="outlined"
              type="text"
              clearable
              hide-details
            ></v-text-field>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>

    <v-sheet  v-if="showAssessmentResult">
  <v-card-title class="title">能力评价</v-card-title>
  <v-row class="mt-2">
    <v-col cols="6">
      <v-card v-if="showAssessmentResult" class="assessment-card">
        <v-card-text class="bg-grey-lighten-1">
          <div class="result-container">
            <div class="left-box">
              <h3>需要提升的能力</h3>
              <ul>
                <li>{{assessment_list[0].text}}</li>
              </ul>
            </div>
          </div>
        </v-card-text>
      </v-card>
    </v-col>
    <v-col cols="6">
      <v-card v-if="showAssessmentResult" class="assessment-card">
        <v-card-text class="bg-grey-lighten-1">
          <div class="result-container">
            <div class="right-box">
              <h3>雷达图</h3>
              <!-- echarts雷达图容器 -->
              <div id="echarts-container" style="width: 100%; height: 300px;"></div>
            </div>
          </div>
        </v-card-text>
      </v-card>
    </v-col>
  </v-row>
</v-sheet>

  <v-sheet  v-if="showAssessmentResult">
    <v-card-title class="title">岗位信息</v-card-title>
    <!-- 公司信息区域 -->
    <v-row>
      <v-col v-for="(info, index) in assessment_list" :key="index" cols="12" sm="4">
        <v-card @dblclick="openDialog(info)" class="company-card">
          <v-row>
            <v-col cols="9">
              <v-card-title>{{ info.公司名称 }}</v-card-title>
            </v-col>
            <v-col>
              {{ info.岗位 }}
            </v-col>
          </v-row>
          <v-card-subtitle>{{ info.description }}</v-card-subtitle>
        </v-card>
      </v-col>
    </v-row>

    <!-- 详细信息展示模态框 -->
    <transition name="modal" appear>
      <v-dialog v-model="dialogShown" persistent max-width="800px">
        <v-card class="detail-card">
          <v-toolbar color="primary" dark >
            <v-toolbar-title>详细信息</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn icon @click="dialogShown = false">
              <v-icon>mdi-close</v-icon>
            </v-btn>
          </v-toolbar>
          <v-card-text v-if="selectedCompanyInfo">
            <h3>{{ selectedCompanyInfo.岗位 }}</h3>
            <p>{{ selectedCompanyInfo.description }}</p>
            <!-- 根据需要添加更多详细信息 -->
          </v-card-text>
        </v-card>
      </v-dialog>
    </transition>

  </v-sheet>
  </div>
</template>



<style scoped>
.expand-card {
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 自定义卡片标题样式 */
.expand-card .v-card-title {
  background-color: #4CAF50;
  color: rgb(162, 210, 127);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* 自定义卡片内容样式 */
.expand-card .v-card-text {
  padding: 20px;
}

/* 自定义卡片扩展动画 */
.v-expand-transition-enter-active, .v-expand-transition-leave-active {
  transition: height 0.5s ease-in-out;
}

.v-expand-transition-enter, .v-expand-transition-leave-to {
  height: 0;
  overflow: hidden;
}

/* 图标容器样式 */
.icons-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 图标样式 */
.icon {
  position: absolute;
  font-size: 30px; /* 减小星星的大小 */
  color: #ffd700; /* 星星黄色 */
  z-index: 999; /* 将图标置于最顶层 */
  animation: iconFall 8s linear infinite; /* 调整速度 */
  filter: drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 5px #ffd700); /* 添加发光效果 */
}

/* 图标下落的动画效果 */
@keyframes iconFall {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(110vh); /* 页面底部 */
  }
}


/* 调整结果卡片背景色 */
.bg-grey-lighten-1 {
  background-color: #f5f5f5;
}

/* 美化能力评估结果盒子 */
.result-container {
  display: flex;
  justify-content: space-between;
}

.left-box, .right-box {
  flex: 1;
  margin: 0 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  height: 350px; /* 设置高度与雷达图容器相同 */
  overflow-y: auto /* 取消滚动条 */
}

.right-box {
  overflow-y: hidden /* 取消滚动条 */
}

.left-box h3, .right-box h3 {
  margin-bottom: 10px;
  color: #333;
}

.left-box ul {
  list-style: none;
  padding: 0;
}

.left-box ul li {
  margin-bottom: 5px;
}
.title {
  margin-top:10px ;
  font-size: 40px;
  margin-bottom: 15px;
  color: #4CAF50;
  text-align: center;
  font-style: italic;
}

/* 卡片阴影、圆角和渐变背景色 */
.assessment-card, .company-card {
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #ffffff, #f0f0f0);
  transition: all 0.3s ease;
}

/* 悬停动画效果 */
.assessment-card:hover, .company-card:hover {
  transform: translateY(-5px);
}

/* 调整岗位信息下面的卡片位置 */
.company-card {
  margin-bottom: 30px; /* 负值可根据需要进行调整 */
}

.detail-card {
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;

}

/* 过渡动画 */
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}


</style>
